import { Button, DatePicker, Select, Form, Icon, Input, Spin } from 'antd';
import React, { ReactNode } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { setCommonFun } from '@/pages/finance/withdraw/utils';
import Mtable from '@/pages/finance/withdraw/components/Mtable';
import CheckModal from './checkModal';
import { getColumns } from './utils';
import styles from './style.less';

const { Option } = Select;

interface StateType {
  [propName: string]: any;
}

const { RangePicker } = DatePicker;
@setCommonFun
class Mail extends React.PureComponent<StateType> {
  public refMtable: any;

  public columns: any = getColumns(this);

  state = {
    effectParams: {
      startTime: moment('00:00:00', 'HH:mm:ss')
        .subtract(6, 'days')
        .format('YYYY-MM-DD HH:mm:ss'),
      endTime: moment('23:59:59', 'HH:mm:ss')
        .subtract(0, 'days')
        .format('YYYY-MM-DD HH:mm:ss'),
    },
    isShowCheckModal: false,
    rowData: null,
  };

  constructor(props: any) {
    super(props);
    this.$httpFeedbackTypeList();
  }

  setFiltersParams = (filtes: any, sorter: any, cb: any) => {
    this.setState(
      (preState: any) => ({
        effectParams: {
          ...preState.effectParams,
        },
      }),
      () => {
        if (cb) {
          cb();
        }
      },
    );
  };

  showCheckModal = (rowData: any) => {
    this.setState({ isShowCheckModal: true, rowData });
  };

  $httpFeedbackTypeList = () => {
    this.props.dispatch({
      type: 'news/feedbackTypeList',
      payload: {},
    });
  };

  render(): ReactNode {
    const { getFieldDecorator } = this.props.form;
    const { effectParams, rowData, isShowCheckModal } = this.state;
    const { feedbackRecordList, feedbackTypeList } = this.props.news.mail;
    const formatFeedbackTypeList = (data: any) =>
      data.map((item: any) => ({
        text: item.name,
        value: item.id,
      }));

    const typeMap = formatFeedbackTypeList(feedbackTypeList);

    return (
      <div className={styles.rechargeWrap}>
        <CheckModal
          rowData={rowData}
          show={isShowCheckModal}
          showLoading={false}
          hide={() => this.setState({ isShowCheckModal: false })}
        />
        <Spin spinning={false}>
          <Form
            layout="inline"
            onSubmit={(e: React.SyntheticEvent) => {
              if (this.refMtable) {
                this.refMtable.handleSubmit(e, this);
              }
            }}
            name="searchRecharge"
          >
            <Form.Item label="类别">
              {getFieldDecorator('typeId', {})(
                <Select style={{ width: 220 }} placeholder="选择审核记录" allowClear>
                  {typeMap.map((item: any) => (
                    <Option key={item.value} value={item.value}>
                      {item.text}
                    </Option>
                  ))}
                </Select>,
              )}
            </Form.Item>

            <Form.Item label="标题">
              {getFieldDecorator('title')(
                <Input allowClear placeholder="请输入标题" autoComplete="off" />,
              )}
            </Form.Item>

            <Form.Item label="发件人">
              {getFieldDecorator('userName')(
                <Input allowClear placeholder="请输入发件人" autoComplete="off" />,
              )}
            </Form.Item>

            <Form.Item label="收件时间">
              {getFieldDecorator('range-time-picker', {
                initialValue: [
                  moment('00:00:00', 'HH:mm:ss').subtract(6, 'days'),
                  moment('23:59:59', 'HH:mm:ss').subtract(0, 'days'),
                ],
              })(
                <RangePicker
                  showTime={{
                    hideDisabledOptions: true,
                    defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                  }}
                  format="YYYY-MM-DD HH:mm:ss"
                />,
              )}
            </Form.Item>

            <Form.Item className={styles.rechargeBtns}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button onClick={this.resetForm}>重置</Button>
            </Form.Item>
          </Form>

          <br />

          <Mtable
            columns={this.columns}
            effectType="news/feedbackRecordList"
            effectParams={effectParams}
            dataSource={feedbackRecordList}
            dispatch={this.props.dispatch}
            setFiltersParams={this.setFiltersParams}
            setSubmitFormatParams={this.setSubmitFormatParams}
            scroll={{ x: 1568 }}
            ref={(element: ReactNode) => {
              this.refMtable = element;
            }}
          />
        </Spin>
      </div>
    );
  }
}

const C = Form.create({ name: 'searchWithdraw' })(Mail);

export default connect(({ news, global, loading }: any) => ({
  news,
}))(C);
